<template>
  <view class="indxex">
    <!-- 搜索框 -->
    <Search></Search>
    <!-- 内容部分 -->
    <view class="classify">
      <view class="classify_content">
        <!-- 左侧 -->
        <view class="left_classify">
          <view
            @click="chadlerIndex(index)"
            :class="curIndex === index ? 'item active' : 'item'"
            v-for="(item, index) in classify"
            :key="index"
          >
            {{ item.cat_name }}
          </view>
        </view>
        <!-- 右侧 -->
        <view class="right_classify">
          <view
            v-for="(value, index) in classify[curIndex].children"
            :key="index"
          >
            <view class="title">/ {{ value.cat_name }} /</view>
            <view class="content_hei">
              <view
                @click="handlerchange(v.cat_id)"
                class="content"
                v-for="(v, i) in value.children"
                :key="i"
              >
                <image :src="v.cat_icon" mode="widthFix"></image>
                <view class="describe">{{ v.cat_name }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search.vue";
export default {
  components: {
    Search,
  },
  data() {
    return {
      classify: [],
      curIndex: 0,
    };
  },
  onLoad() {
    this.getClassify();
  },
  methods: {
    // 点击左侧事件触发
    chadlerIndex(index) {
      this.curIndex = index;
    },
    // 点击商品跳转到商品列表页
    handlerchange(cat_id) {
      uni.navigateTo({
        url: "/pages/goods_list/index?cat_id=" + cat_id,
      });
    },

    // 请求回来的数据
    async getClassify() {
      const [error, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
      });
      if (res.data.meta.status === 200) {
        this.classify = res.data.message;
      }
    },
  },
};
</script>

<style lang="less">
.classify_content {
  display: flex;
  height: calc(100vh - 100rpx);
  .left_classify {
    width: 182rpx;
    height: calc(100vh - 100rpx);
    background: #f3f3f3;
    // 多出的内容使用滚动条滑动
    overflow: scroll;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #585858;
      height: 70rpx;
      font-size: 28rpx;
    }
    .item::before {
      content: "";
      height: 43rpx;
      width: 4rpx;
      background: #ea4350;
      position: absolute;
      left: 0;
      top: 20rpx;
    }
    .active {
      color: #ea4350;
      position: relative;
      font-weight: 700;
    }
  }
  .right_classify {
    flex: 1;
    height: 100%;
    padding: 0 40rpx;
    // 多出的内容使用滚动条滑动
    overflow: scroll;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 70rpx;
      color: #575757;
      font-size: 26rpx;
    }
    .content_hei {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .content {
      margin: 15rpx 0;
      height: 150rpx;
      width: 33.3%;
      text-align: center;
      image {
        height: 120rpx;
        width: 120rpx;
      }
      .describe {
        font-size: 24rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
